<template>
  <div >
    <van-uploader 
    :after-read="afterRead"
    >
      <img ref="image" class="img" src="../../assets/image/user.png" alt="">
    </van-uploader>
    <van-form @submit="onSubmit">
    <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="不可修改"
    readonly
  />
  <van-field
    v-model="telephone"
    type="number"
    name="手机号"
    label="手机号"
    placeholder="手机号"
    readonly
  />
  <van-field
    v-model="email"
    name="邮箱"
    label="邮箱"
    placeholder="邮箱"
    :maxlength="20"
    :rules="emailRules"
  />
  <van-field
    v-model="nickName"
    name="昵称"
    label="昵称"
    placeholder="昵称"
    :maxlength="20"
    :rules="[{ required: true,message: '请填写昵称' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="不修改密码请留空"
    :maxlength="20"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
    <van-button @click="back" style="margin-top: 16px;" round block type="info"  native-type="button">返回</van-button>  
  </div>
  </van-form> 
  
  </div>
</template>

<script>
export default {
  data () {
    return {
        username: '收手吧彦祖',
        password: '',
        telephone:'13800000000',
        email:'',
        nickName:'',
        // 规则校验
        emailRules:[
          {
              required: true,
              message: "请输入邮箱",
              trigger: "onBlur"
          },
          {
              validator: value => {
                 return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)
                },
              message: "请输入正确格式的邮箱"
          }
        ],
       
    }
  },
  methods:{
    //提交按钮
    onSubmit(values) {
      console.log('submit', values);
    },
    //图片上传的回调
    afterRead(file){
      console.log(file);
      this.$refs.image.src = file.content
    },
    back(){
      this.$router.back()
    }
  },
  created(){},
  mounted(){},
}
</script>
<style scoped lang="scss">
  .img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
</style>